<template>
  <!-- 列设置 -->
  <a-dropdown placement="bottomRight" :trigger="['click']" :visible="visible">
    <a-button
      class="mr10"
      :style="buttonStyle"
      :type="type"
      size="small"
      ghost
      @click.prevent="open"
    >
      列设置
    </a-button>
    <template #overlay>
      <div class="ant-dropdown-menu" @click.stop>
        <header>列设置</header>
        <ul v-if="freezeFields">
          <li
            v-for="(element, index) in freezeFields"
            :key="element.key"
            class="columnItem cp df unmover"
          >
            <a-icon type="bars" class="mr6" style="margin-top: 3px" />
            <a-checkbox
              :checked="element.isSelected === 1"
              :disabled="element.isMustSelected === 1 || element?.freeze === 1"
              @change="onChange(element)"
            />
            <span class="ml6 fg1 fs1 f1">{{ element.columnName }}</span>
            <span
              v-if="freezeFields.length - 1 === index"
              class="rowFixed"
              @click="handlerFreeze(-1)"
              >取消冻结</span
            >
          </li>
        </ul>
        <draggable
          v-model="menuListFields"
          item-key="index"
          tag="ul"
          draggable=".columnItem"
          @end="onDragEnd"
        >
          <template v-for="(record, index) in menuListFields">
            <li
              v-if="record.freeze !== 1"
              :key="record.key"
              class="columnItem cp df"
            >
              <a-icon type="bars" class="mr6" style="margin-top: 3px" />
              <a-checkbox
                :checked="record.isSelected === 1"
                :disabled="record.isMustSelected === 1"
                @change="onChange(record)"
              />
              <span class="ml6 fg1 fs1 f1">{{ record.columnName }}</span>
              <span
                v-if="record.freeze !== 1"
                class="rowFixed"
                @click="handlerFreeze(index)"
                >冻结至此</span
              >
            </li>
          </template>
        </draggable>
        <a-row
          type="flex"
          align="middle"
          justify="end"
          style="padding: 4px 10px"
        >
          <a-button class="mr10" type="text" size="small" @click="open">
            取消
          </a-button>
          <a-button type="primary" size="small" @click="onConfirm">
            确定
          </a-button>
        </a-row>
      </div>
    </template>
  </a-dropdown>
</template>
<script>
import draggable from 'vuedraggable'
import { config_update_menu_field_post } from 'server/modules/1890.js'

export default {
  components: {
    draggable
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    menuName: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'primary'
    },
    buttonStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      menuListFields: this.value,
      visible: false,
      freezeIndex: -1
    }
  },
  computed: {
    freezeFields() {
      return this.menuListFields.filter(item => {
        return item?.freeze === 1
      })
    }
  },
  watch: {
    value: {
      handler(val) {
        this.menuListFields = JSON.parse(JSON.stringify(val))
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    open() {
      this.visible = !this.visible
    },
    onDragEnd(evt) {
      evt.preventDefault()
    },
    onChange(item) {
      if (item.isSelected === 1) {
        item.isSelected = 0
      } else {
        item.isSelected = 1
      }
    },
    handlerFreeze(index) {
      this.freezeIndex = index
      this.menuListFields.map((item, mIndex) => {
        if (mIndex <= index) {
          this.$set(this.menuListFields[mIndex], 'freeze', 1)
        } else {
          this.$set(this.menuListFields[mIndex], 'freeze', 0)
        }
      })
      this.$forceUpdate()
    },
    async onConfirm() {
      const { success } = await config_update_menu_field_post({
        menuName: this.menuName,
        beforeFieldPos: this.menuListFields
      })
      if (success) {
        this.open()
        this.$emit('update:value', this.menuListFields)
        this.$emit('change', this.menuListFields)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.ant-dropdown-menu {
  width: 220px;
}
.sortable-ghost {
  background: #e6f7ff;
}
header {
  padding: 3px 12px 7px 12px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}
ul {
  max-height: 300px;
  overflow-y: scroll;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 0;
  .columnItem {
    padding: 4px 8px !important;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
    &:hover {
      background: #f5f5f5;
      .rowFixed {
        display: block;
      }
    }
    .rowFixed {
      color: #1890ff;
      display: none;
    }
    &.unmover {
      background: #f5f5f5;
    }
  }
}
</style>
